<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>员工管理</el-breadcrumb-item>
            <el-breadcrumb-item>新增员工</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form  :model="form" ref="form" :rules="rules" label-width="80px" style="width:500px;" >
            <el-form-item label="员工名称" prop="empName">
                <el-input   v-model="form.empName" placeholder="请输入员工名称"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio v-model="form.gender" label="男">男</el-radio>
                <el-radio v-model="form.gender" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input   v-model="form.age" placeholder="请输入员工年龄"></el-input>
            </el-form-item>
            <el-form-item label="工资" prop="salary">
                <el-input   v-model="form.salary" placeholder="请输入员工工资"></el-input>
            </el-form-item>
            <el-form-item label="职位" prop="job">
                <el-input   v-model="form.job" placeholder="请输入员工职位"></el-input>
            </el-form-item>
            <el-form-item label="部门" prop="empDept">
                <el-select v-model="form.empDept" placeholder="请选择部门">
                    <el-option v-for="item in depts" :key="item.deptId" :label="item.deptName" :value="item.deptName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="addEmp" type="primary" round>新增</el-button>
                <el-button @click="resetForm" type="success" round>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                depts:[],
                form: {
                    empName:'',
                    gender:'男',
                    age:'',
                    salary:'',
                    job:'',
                    empDept:'',
                },
                rules:{
                    empName:[{required:true,message:'员工姓名必填',trigger:'blur'}],
                    gender:[{required:true,message:'性别必填',trigger:'blur'}],
                    age:[{required:true,message:'员工年龄必填',trigger:'blur'}],
                    salary:[{required:true,message:'员工工资必填',trigger:'blur'}],
                    job:[{required:true,message:'员工职位必填',trigger:'blur'}],
                    empDept:[{required:true,message:'员工部门必填',trigger:'blur'}],
                }
            }
        },
        methods:{
            addEmp(){
                this.$refs['form'].validate(valid=>{
                    if(valid){
                        //console.log(this.form);
                        this.$http.empApi.add(this.form).then(res=>{
                        console.log(res);
                        if(res.data.code==200){
                            this.$message({
                                type:'success',
                                message:'增加员工成功'
                            })
                            this.$router.push('/home/emp-list')
                        }
                        }).catch(err=>console.log(err))
                    }else{
                        this.$notify({
                            type:'error',
                            message:'表单填写错误！'
                        })
                    }
                })
            },
            resetForm(){
                this.$refs.form.resetFields();
            }
        },
        mounted(){
            //加载部门下拉选的内容
            this.$http.deptApi.queryAll().then(res=>{
                console.log(res);
                this.depts=res.data.data
            }).catch(err=>console.log(err))
        }

    }
</script>

<style lang="scss" scoped>

</style>